import { Layout, Menu, Breadcrumb, Input, Avatar, Dropdown, Space } from 'antd';
import { UserOutlined, DashboardOutlined, TeamOutlined, 
         MedicineBoxOutlined, CoffeeOutlined, DesktopOutlined, 
         FileOutlined, SettingOutlined, SearchOutlined } from '@ant-design/icons';
import { useState } from 'react';
import { useAuth } from './hooks/useAuth';
import './App.css';
import Dashboard from './pages/Dashboard';
import Patients from './pages/Patients';
import GlucoseMonitoring from './pages/GlucoseMonitoring';
import DietRecords from './pages/DietRecords';
import DeviceManagement from './pages/DeviceManagement';
import ReportCenter from './pages/ReportCenter';
import SystemSettings from './pages/SystemSettings';
import Login from './pages/Login';

const { Header, Sider, Content, Footer } = Layout;

function App() {
  const [collapsed, setCollapsed] = useState(false);
  const [currentView, setCurrentView] = useState('dashboard');
  const { user, logout } = useAuth();

  const renderCurrentView = () => {
    switch (currentView) {
      case 'dashboard':
        return <Dashboard />;
      case 'patients':
        return <Patients />;
      case 'glucose':
        return <GlucoseMonitoring />;
      case 'diet':
        return <DietRecords />;
      case 'devices':
        return <DeviceManagement />;
      case 'reports':
        return <ReportCenter />;
      case 'settings':
        return <SystemSettings />;
      default:
        return <Dashboard />;
    }
  };

  const menuItems = [
    {
      key: 'dashboard',
      icon: <DashboardOutlined />,
      label: '仪表盘',
    },
    {
      key: 'patients',
      icon: <TeamOutlined />,
      label: '患者管理',
    },
    {
      key: 'glucose',
      icon: <MedicineBoxOutlined />,
      label: '血糖监测',
    },
    {
      key: 'diet',
      icon: <CoffeeOutlined />,
      label: '饮食记录',
    },
    {
      key: 'devices',
      icon: <DesktopOutlined />,
      label: '设备管理',
    },
    {
      key: 'reports',
      icon: <FileOutlined />,
      label: '报告中心',
    },
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: '系统设置',
    },
  ];

  const userMenuItems = [
    {
      key: 'profile',
      label: '个人资料',
    },
    {
      key: 'settings',
      label: '设置',
    },
    {
      key: 'logout',
      label: '退出登录',
      onClick: logout,
    },
  ];

  if (!user) {
    return <Login />;
  }

  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 侧边导航 */}
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="logo">
          {collapsed ? 'HAI' : 'Health-AI'}
        </div>
        <Menu 
          theme="dark" 
          mode="inline" 
          defaultSelectedKeys={['dashboard']}
          items={menuItems}
          onClick={({ key }) => setCurrentView(key)}
        />
      </Sider>

      {/* 主体区域 */}
      <Layout>
        <Header className="site-header">
          <div className="header-search">
            <Input 
              placeholder="全局搜索（患者/报告/设备）" 
              prefix={<SearchOutlined />}
              style={{ width: 300 }}
            />
          </div>
          <div className="header-user">
            <Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
              <Space>
                <span>{user.username}</span>
                <Avatar icon={<UserOutlined />} />
              </Space>
            </Dropdown>
          </div>
        </Header>

        <Content style={{ margin: '16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
            <Breadcrumb.Item>
              {menuItems.find(item => item.key === currentView)?.label}
            </Breadcrumb.Item>
          </Breadcrumb>
          {/* 子路由渲染区 */}
          <div style={{ padding: 24, minHeight: 360, background: '#fff' }}>
            {renderCurrentView()}
          </div>
        </Content>

        <Footer style={{ textAlign: 'center' }}>
          ©2025 Health-AI 医护后台系统 | 版本 1.0.0
        </Footer>
      </Layout>
    </Layout>
  );
}

export default App;
